<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>散客消费明细</title>
<meta name="decorator" content="default" />
<style type="text/css">
div.ui-input-text{
width: 15em;
}
</style>
</head>
<body>
	<div class="container">
		<div class="icon-buttons">
			<input type="button" data-inline="true" data-icon="back"
				onclick="return directOpenURL('${ctx}/cash/consume/nonmember')"
				data-iconpos="notext" value="返回" />
		</div>
		<div>
			<br />
			<h2 style="text-align: center;">消费明细页面</h2>
			<h3>消费汇总</h3>
			<form action="#" id="contentForm">
				<label>消费时间：</label> <input id="time" type="text" name="time"
					readonly="readonly" /> <label>消费编号：</label> <input id="number"
					type="text" name="number" readonly="readonly" /> <label><strong>总计零售价(元)：</strong></label>
				<input id="realCostTotal" type="text" name="realCostTotal"
					readonly="readonly" />
			</form>
			<br /> <br />
		</div>
		<div id="productDivID" style="display: none;" data-role="collapsible" data-collapsed="false">
			<h4>购买产品</h4>
			<div class="middleCls">
				<table id="productsTable" data-role="table"
					class="ui-responsive table-stroke">
					<thead>
						<tr>
							<th colspan="6" style="text-align:center;">购买产品</th>
						</tr>
						<tr>
							<th>产品名称</th>
							<th>产品规格</th>
							<th>数量</th>
							<th>零售价</th>
							<th>合计</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
		<div id="careDivID"  style="display: none;" data-role="collapsible" data-collapsed="false">
			<h4>手工护理</h4>
			<div class="middleCls">
				<table id="caresTable" data-role="table"
					class="ui-responsive table-stroke">
					<thead>
						<tr>
							<th colspan="5" style="text-align:center;">护理项目</th>
						</tr>
						<tr>
							<th>护理名称</th>
							<th>服务专员</th>
							<th>护理次数</th>
							<th>零售价</th>
						</tr>
					</thead>
					<tbody>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function() {
			var jsonData = JSON.parse('${jsonData}');
			$("#contentForm #number").val(jsonData.number);
			$("#contentForm #time").val(jsonData.time);
			$("#contentForm #realCostTotal").val(jsonData.money);
			var products = jsonData.products;
			var cares = jsonData.cares;
			if (products.length == 0) {
				$("div#productDivID").css("display", "none");
			} else {
				$("div#productDivID").css("display", "block");
			}
			var html = "";
			for ( var index = 0; index < products.length; index++) {
				var p = products[index];
				html += "<tr>";
				html += "<td>";
				html += p.name;
				html += "</td>";
				html += "<td>";
				html += p.spec;
				html += "</td>";
				html += "<td>";
				html += p.amount;
				html += "</td>";
				html += "<td>";
				html += p.retailPrice;
				html += "</td>";
				html += "<td>";
				html += p.realCostTotal;
				html += "</td>";
				html += "</tr>";
			}
			$("#productsTable").append(html);
			$("#productsTable").trigger("create");
			if (cares.length == 0) {
				$("div#careDivID").css("display", "none");
			} else {
				$("div#careDivID").css("display", "block");
			}

			html = "";
			for ( var index = 0; index < cares.length; index++) {
				var c = cares[index];
				html += "<tr>";
				html += "<td>";
				html += c.name;
				html += "</td>";
				html += "<td>";
				html += c.employee;
				html += "</td>";
				html += "<td>";
				html += 1;
				html += "</td>";
				html += "<td>";
				html += c.retailPrice;
				html += "</td>";
				html += "</tr>";
			}
			$("#caresTable").append(html);
			$("#caresTable").trigger("create");
		});
	</script>
</body>
</html>
